const center = [104.1324, 36.92669]
var map = null, drawTool
var mapDom = document.getElementById('map')
map = new mapboxgl.Map({
    accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
    container: mapDom, // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: center, // starting position [lng, lat]
    zoom: 3,
    doubleClickZoom: false,
    hash: false,
    localFontFamily: true,
    logoPosition: 'bottom-right'
});

map.on('load', () => {
    drawTool = new DrawTools(map)
})

document.getElementById('point').onclick = () => {
    drawTool.activeDraw('point')
}

document.getElementById('polyline').onclick = () => {
    drawTool.activeDraw('polyline')
}

document.getElementById('polygon').onclick = () => {
    drawTool.activeDraw('polygon')
}

document.getElementById('circle').onclick = () => {
    drawTool.activeDraw('circle')
}

document.getElementById('rect').onclick = () => {
    drawTool.activeDraw('rect')
}

document.getElementById('deactive').onclick = () => {
    drawTool.deactiveDraw()
}

document.getElementById('clear').onclick = () => {
    drawTool.clearDraw()
}